<template>
	<view class="iconfont" @click="goback" style=" width: 50rpx;margin-top: 8rpx;font-size: 40rpx;">&#xe6b1;</view>
	<view class="allContent" v-for="item in Arr">
		<view class="head">
			<view style="display: flex;">
				<view class="iconfont">&#xe609;</view>
				<view><text>已取消</text></view>
			</view>
			<view><text>订单超时未支付已关闭</text></view>
		</view>
		<view class="shMsg">
			<view class="iconfont">&#xe67e;</view>
			<view>
				<view><text>收货人：{{item.s_people}}</text></view>
				<view><text>收货地址：{{item.s_dizhi}}</text></view>
			</view>
			<view class="iconfont"></view>
		</view>
		<view class="mingxi">
			<view><text>订单明细</text></view>
			<view class="majorcontent">
				<view class="pic">
					<image :src="IP+item.yp_imgsrc" mode=""></image>
				</view>
				<view>
					<text class="describe">Rx</text><text>{{item.yp_mingcheng}}</text><text>×{{item.yaopinshuliang}}</text>
					<view class="">
						规格：{{item.yp_guige}}
					</view>
					<view class="price">
						￥{{item.yp_jiage}}
					</view>
				</view>
			</view>
		</view>
		<view class="money">
			<view class="item">
				<view><text>商品总价:</text></view>
				<view><text>￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)}} </text></view>
			</view>
			<view class="item">
				<view><text>运费:</text></view>
				<view><text>￥{{item.yp_yunfei}}</text></view>
			</view>
			<view class="item">
				<view><text>优惠卷:</text></view>
				<view><text>-￥0.00</text></view>
			</view>
			<view class="item2">
				<view><text>实付款:</text></view>
				<view><text>￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)+parseInt(item.yp_yunfei)}}</text></view>
			</view>
		</view>
		<view class="footer">
			<view class="f_item">
				<view>订单编号</view>
				<view>{{item.ypdd_bianhao}}</view>
				<view>复制</view>
			</view>
			<view class="f_item">
				<view>下单时间</view>
				<view>{{item.ypdd_xiadantime}}</view>

			</view>
			<view class="btn">
				<view @click="delDD(item.ypdd_id)">删除订单</view>
				<view @click="goshopcart">再次购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	// 引http
	import http from '../../utils/http.js';
	import {
		useStore
	} from 'vuex';
	let id;

	export default {
		setup() {
			const {
				state,
				getters,
				commit,
				dispatch
			} = useStore()
			onLoad((e) => {
				console.log(e.id)
				id = e.id
			})
			onMounted(() => {

				for (let i = 0; i < state.dingdan.dingdan.length; i++) {
					if (state.dingdan.dingdan[i].ypdd_id == id) {
						data.Arr.push(state.dingdan.dingdan[i])
					}
				}
				console.log(data.Arr)
			})
			let data = reactive({
				IP: 'http://localhost:8088',
				Arr: [],
				goback: () => {
					uni.redirectTo({
						url: '/pages/myorder/order?iskind=已取消'
					})
				},
				goshopcart: () => {
					uni.switchTab({
						url: '/pages/shopcart/shopcart'
					})
				},
				delDD(n) {
					http({
						url: '/shanchudingdan',
						method: 'post',
						data: {
							id: n
						}
					}).then((res) => {
						// data.getData(data.iskind)
						data.goback()
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
					})
					
				},

			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");

	.allContent {
		background-color: #F2F2F2;

		.head {
			display: flex;
			justify-content: space-between;
			height: 170rpx;
			line-height: 170rpx;
			background-color: #DA2222;
			color: white;
			border: 3rpx solid black;

			view:first-child {
				margin-left: 20rpx;
			}

			view:last-child {
				margin-right: 20rpx;
			}
		}

		.shMsg {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 170rpx;
			background-color: white;
			margin-top: 30rpx;
		}

		.mingxi {
			padding-top: 30rpx;
			margin-top: 30rpx;
			background-color: white;

			.majorcontent {
				margin-top: 50rpx;
				display: flex;

				.pic {
					width: 300rpx;
					height: 300rpx;
					image{width: 100%;height: 100%;}
				}

				.price {
					display: flex;
					justify-content: flex-start;
					color: red;
				}

				.describe {
					background-color: red;
					color: white;
					border-radius: 20%;
					padding: 0 15rpx;
				}

			}
		}

		.money {
			margin: 30rpx 0;
			background-color: white;
			padding: 30rpx 0;

			.item {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				view:first-child {
					margin-left: 30rpx;
				}

				view:last-child {
					color: red;
					margin-right: 30rpx;
				}
			}

			.item2 {
				margin-top: 30rpx;
				display: flex;
				justify-content: flex-end;

				view:last-child {
					color: red;
					margin-right: 30rpx;
				}
			}
		}

		.footer {
			background-color: white;
			margin-top: 30rpx;
			padding-top: 30rpx;

			.f_item {
				display: flex;
				margin-top: 30rpx;

				view {
					margin-left: 20rpx;
				}
			}
		}

		.btn {
			margin: 30rpx 0;
			display: flex;
			justify-content: flex-end;

			view:first-child {
				border: 1rpx solid red;
				padding: 10rpx 10rpx;
			}

			view:last-child {
				margin: 0 20rpx;
				border: 1rpx solid red;
				padding: 10rpx 10rpx;
				background-color: red;
				color: white;
			}
		}
	}
</style>
